<template>
  <BasePage title="学院确认记录">
    <!-- 搜索筛选区域 -->
    <div class="bg-white p-4 rounded-lg shadow mb-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="flex flex-col">
          <label class="text-sm text-gray-600 mb-1">学院名称</label>
          <input
            v-model="searchForm.collegeName"
            type="text"
            placeholder="请输入学院名称"
            class="border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div class="flex flex-col">
          <label class="text-sm text-gray-600 mb-1">确认状态</label>
          <select
            v-model="searchForm.status"
            class="border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">全部</option>
            <option value="pending">待确认</option>
            <option value="confirmed">已确认</option>
            <option value="rejected">已拒绝</option>
          </select>
        </div>
        <div class="flex flex-col">
          <label class="text-sm text-gray-600 mb-1">确认时间</label>
          <input
            v-model="searchForm.confirmDate"
            type="date"
            class="border rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
      </div>
      <div class="flex justify-end mt-4">
        <button
          @click="resetSearch"
          class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
        >
          重置
        </button>
        <button
          @click="searchRecords"
          class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
        >
          搜索
        </button>
      </div>
    </div>

    <!-- 记录列表 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              学院名称
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              确认状态
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              确认时间
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              确认人
            </th>
            <th
              scope="col"
              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
            >
              操作
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="(record, index) in records" :key="index">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
              {{ record.collegeName }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm">
              <StatusCard :status="record.status" />
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ record.confirmDate }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              {{ record.confirmer }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              <button
                @click="viewDetails(record)"
                class="text-blue-600 hover:text-blue-900 mr-2"
              >
                查看详情
              </button>
            </td>
          </tr>
          <tr v-if="records.length === 0">
            <td colspan="5" class="px-6 py-4 text-center text-gray-500">
              暂无数据
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 分页 -->
      <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
        <div class="flex-1 flex justify-between sm:hidden">
          <button
            @click="prevPage"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
          >
            上一页
          </button>
          <button
            @click="nextPage"
            :disabled="currentPage === totalPages"
            class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
            :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700">
              显示第
              <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span>
              至
              <span class="font-medium">
                {{ Math.min(currentPage * pageSize, totalRecords) }}
              </span>
              条，共
              <span class="font-medium">{{ totalRecords }}</span>
              条记录
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <button
                @click="prevPage"
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
              >
                <span class="sr-only">上一页</span>
                &lt;
              </button>
              <button
                v-for="page in displayedPages"
                :key="page"
                @click="goToPage(page)"
                :class="[
                  'relative inline-flex items-center px-4 py-2 border text-sm font-medium',
                  currentPage === page
                    ? 'z-10 bg-blue-50 border-blue-500 text-blue-600'
                    : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
                ]"
              >
                {{ page }}
              </button>
              <button
                @click="nextPage"
                :disabled="currentPage === totalPages"
                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
                :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
              >
                <span class="sr-only">下一页</span>
                &gt;
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="showDetailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
      <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="px-6 py-4 border-b border-gray-200">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">确认记录详情</h3>
            <button @click="showDetailModal = false" class="text-gray-400 hover:text-gray-500">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div class="px-6 py-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <p class="text-sm text-gray-500">学院名称</p>
              <p class="text-base">{{ selectedRecord.collegeName }}</p>
            </div>
            <div>
              <p class="text-sm text-gray-500">确认状态</p>
              <StatusCard :status="selectedRecord.status" />
            </div>
            <div>
              <p class="text-sm text-gray-500">确认时间</p>
              <p class="text-base">{{ selectedRecord.confirmDate }}</p>
            </div>
            <div>
              <p class="text-sm text-gray-500">确认人</p>
              <p class="text-base">{{ selectedRecord.confirmer }}</p>
            </div>
          </div>
          <div class="mb-4">
            <p class="text-sm text-gray-500 mb-1">确认内容</p>
            <div class="border rounded-md p-3 bg-gray-50">
              <p class="text-base">{{ selectedRecord.content }}</p>
            </div>
          </div>
          <div v-if="selectedRecord.status === 'rejected'" class="mb-4">
            <p class="text-sm text-gray-500 mb-1">拒绝原因</p>
            <div class="border rounded-md p-3 bg-gray-50">
              <p class="text-base">{{ selectedRecord.rejectReason }}</p>
            </div>
          </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 flex justify-end">
          <button
            @click="showDetailModal = false"
            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import BasePage from '../../components/BasePage.vue';
import StatusCard from '../../components/StatusCard.vue';

export default {
  name: 'CollegeConfirmRecords',
  components: {
    BasePage,
    StatusCard
  },
  setup() {
    // 搜索表单
    const searchForm = ref({
      collegeName: '',
      status: '',
      confirmDate: ''
    });

    // 分页相关
    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalRecords = ref(0);
    const totalPages = computed(() => Math.ceil(totalRecords.value / pageSize.value));

    // 显示的页码
    const displayedPages = computed(() => {
      const pages = [];
      const maxPagesToShow = 5;
      
      let startPage = Math.max(1, currentPage.value - Math.floor(maxPagesToShow / 2));
      let endPage = Math.min(totalPages.value, startPage + maxPagesToShow - 1);
      
      if (endPage - startPage + 1 < maxPagesToShow) {
        startPage = Math.max(1, endPage - maxPagesToShow + 1);
      }
      
      for (let i = startPage; i <= endPage; i++) {
        pages.push(i);
      }
      
      return pages;
    });

    // 记录数据
    const records = ref([]);
    
    // 模拟数据
    const mockData = [
      {
        id: 1,
        collegeName: '计算机科学与技术学院',
        status: 'confirmed',
        confirmDate: '2023-05-15 10:30:45',
        confirmer: '张主任',
        content: '5月份学院免上报申请已确认，共15人申请免上报，其中14人符合条件，1人不符合条件。',
        rejectReason: ''
      },
      {
        id: 2,
        collegeName: '机械工程学院',
        status: 'pending',
        confirmDate: '',
        confirmer: '',
        content: '5月份学院免上报申请待确认，共10人申请免上报。',
        rejectReason: ''
      },
      {
        id: 3,
        collegeName: '电气工程学院',
        status: 'rejected',
        confirmDate: '2023-05-14 16:20:30',
        confirmer: '李主任',
        content: '5月份学院免上报申请已拒绝，共8人申请免上报。',
        rejectReason: '申请材料不完整，请补充相关证明材料后重新提交。'
      },
      {
        id: 4,
        collegeName: '经济管理学院',
        status: 'confirmed',
        confirmDate: '2023-05-13 09:15:22',
        confirmer: '王主任',
        content: '5月份学院免上报申请已确认，共12人申请免上报，全部符合条件。',
        rejectReason: ''
      },
      {
        id: 5,
        collegeName: '外国语学院',
        status: 'confirmed',
        confirmDate: '2023-05-12 14:40:18',
        confirmer: '赵主任',
        content: '5月份学院免上报申请已确认，共6人申请免上报，全部符合条件。',
        rejectReason: ''
      }
    ];

    // 加载数据
    const loadData = () => {
      // 模拟API调用
      setTimeout(() => {
        // 过滤数据
        let filteredData = [...mockData];
        
        if (searchForm.value.collegeName) {
          filteredData = filteredData.filter(item => 
            item.collegeName.includes(searchForm.value.collegeName)
          );
        }
        
        if (searchForm.value.status) {
          filteredData = filteredData.filter(item => 
            item.status === searchForm.value.status
          );
        }
        
        if (searchForm.value.confirmDate) {
          const searchDate = searchForm.value.confirmDate.split('T')[0];
          filteredData = filteredData.filter(item => 
            item.confirmDate && item.confirmDate.startsWith(searchDate)
          );
        }
        
        // 更新总记录数
        totalRecords.value = filteredData.length;
        
        // 分页
        const start = (currentPage.value - 1) * pageSize.value;
        const end = start + pageSize.value;
        records.value = filteredData.slice(start, end);
      }, 300);
    };

    // 搜索记录
    const searchRecords = () => {
      currentPage.value = 1;
      loadData();
    };

    // 重置搜索
    const resetSearch = () => {
      searchForm.value = {
        collegeName: '',
        status: '',
        confirmDate: ''
      };
      currentPage.value = 1;
      loadData();
    };

    // 分页操作
    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--;
        loadData();
      }
    };

    const nextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++;
        loadData();
      }
    };

    const goToPage = (page) => {
      currentPage.value = page;
      loadData();
    };

    // 详情弹窗
    const showDetailModal = ref(false);
    const selectedRecord = ref({});

    const viewDetails = (record) => {
      selectedRecord.value = record;
      showDetailModal.value = true;
    };

    // 初始化
    onMounted(() => {
      loadData();
    });

    return {
      searchForm,
      records,
      currentPage,
      pageSize,
      totalRecords,
      totalPages,
      displayedPages,
      searchRecords,
      resetSearch,
      prevPage,
      nextPage,
      goToPage,
      showDetailModal,
      selectedRecord,
      viewDetails
    };
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>